import React, { useState } from 'react';
import logo from '@/assets/new_home/logo.png'
const HistoryPanel = ({ onItemSelected }) => {
  const [selectedItem, setSelectedItem] = useState(null);
  const [showAll, setShowAll] = useState(false);

  const historyItems = [
  
    { id: 2, title: "昨天" },
    { id: 3, title: "为什么人在梦中飞sdfsdfsdfsdfdsfd" },
    { id: 4, title: "如何提高工作效率" },
    { id: 5, title: "项目进度报告" },
    { id: 6, title: "团队会议记录" },
    { id: 7, title: "客户反馈分析" },
    { id: 8, title: "市场调研报告" },
    { id: 9, title: "产品需求讨论" },
    { id: 10, title: "技术方案评审" },
    { id: 11, title: "用户使用反馈" },
    { id: 12, title: "系统优化建议" },
    { id: 13, title: "数据分析报告" },
    { id: 14, title: "项目风险评估" },
    { id: 15, title: "团队建设讨论" }
  ];

  const displayedItems = showAll ? historyItems : historyItems.slice(0, 10);

  const handleItemClick = (item) => {
    setSelectedItem(item);
    onItemSelected(item);
  };

  return (
    <div className="history-panel">
      <div className="panel-header">
        <div className="app-logo">
        <img src={logo}></img>
          <span className="logo-text">
           
            SmartOffice+</span>
        </div>
      </div>
      <div className='chart-text'>聊天</div>
      <div className="history-list">
     
        {displayedItems.map((item) => (
          <div 
            key={item.id}
            className={`history-item ${selectedItem?.id === item.id ? 'selected' : ''}`}
            onClick={() => handleItemClick(item)}
            style={{ color: selectedItem?.id === item.id ? '#67bae6' : '#666' }}
          >
            {item.title}
          </div>
        ))}
        {historyItems.length > 10 && (
          <button 
            className="view-more-btn"
            onClick={() => setShowAll(!showAll)}
          >
            {showAll ? '收起' : '查看更多'}
          </button>
        )}
      </div>

      <style jsx>{`
        .history-panel {
   
          border-radius: 8px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          position: fixed;
          top: 0;
          right: 0;
           width: 400px;
          height: 100vh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
.chart-text{
margin-left:20px;
    color: rgb(102, 102, 102);
}
        .panel-header {
          display: flex;
          align-items: center;
          padding: 20px;
    
     
          position: sticky;
          top: 0;
          z-index: 1;
        }

        .app-logo {
          display: flex;
          align-items: center;
          width:200px;
          gap:5px;
          background-color: #f5f5f5;
          border-radius: 8px;
          padding: 8px 16px;
        }

        .logo-text {
          font-size: 16px;
          color: #333;
          margin-left: 8px;
        }

        .history-list {
          flex: 1;
          overflow-y: auto;
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .history-item {
          font-size: 14px;
          cursor: pointer;
          width:45%;
          padding: 12px;
          border-radius: 6px;
          transition: all 0.2s;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .history-item:hover {
          background-color: #f5f5f5;
        }

        .history-item.selected {
          font-weight: 500;
          background-color: #e6f4ff;
        }

        .view-more-btn {
          background: none;
          border: none;
          color: #007bff;
          cursor: pointer;
          font-size: 14px;
          padding: 12px;
          text-align: left;
          transition: color 0.2s;
          margin-top: 8px;
        }

        .view-more-btn:hover {
          color: #0056b3;
        }

        /* 自定义滚动条样式 */
        .history-list::-webkit-scrollbar {
          width: 6px;
        }

        .history-list::-webkit-scrollbar-track {
          background: transparent;
        }

        .history-list::-webkit-scrollbar-thumb {
          background-color: #ddd;
          border-radius: 3px;
        }

        .history-list::-webkit-scrollbar-thumb:hover {
          background-color: #ccc;
        }
      `}</style>
    </div>
  );
};

export default HistoryPanel;